<script setup lang='ts'>
import signApi from "@/apis/signApi";
import userStore from "@/store/userStore";
import { ElMessage, ElMessageBox } from "element-plus";
import {onMounted, ref} from "vue"
let input=ref("")
 
let isSign=ref<boolean>(false)
const TableDate=ref()

//加载就获取当前的签到信息
onMounted(async()=>{
  TableDate.value=   (await signApi.getSignInfo()).data
  console.log(TableDate);
  //判断当天是否签到
  const res= (await signApi.isSign(userStore().info.id)).msg

  if(res=="用户已签到"){
    isSign.value=true
  }
})

const handleClick = () => {
  console.log('click')
}
const isShow=ref<boolean>(false)

const submit=async(input: string)=>{
      if(input.length>=5 && input.length<=20){

        isSign.value=true
           //发送请求到mysql中，保存，再回显
      const res= (await signApi.storeSignInfo(userStore().info?.id,input)).msg
     
       //回显
    TableDate.value=   (await signApi.getSignInfo()).data
 
        //提交
        ElMessage({
            type:"success",
            message:res
        })
        isShow.value=false
        }

    else{
        isShow.value=true
    }
      }




  const open = (u_id:any) => {
  ElMessageBox.confirm(
    '是否删除此签到',
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async() => {
      const res= (await signApi.deletSign(u_id)).msg
 //回显
 TableDate.value=   (await signApi.getSignInfo()).data
 isSign.value=false
      ElMessage({
        type: 'success',
        message: res,
      })
    })
   }

</script>
<template>


    <div class=" bg-slate-300   w-10/12 border mr-[200px]
    rounded-md border-gray-300 shadow-sm hover:shadow-md">
     <div >
      <div class=" flex justify-start ml-3 mt-2 p-3">
        <icon-smart-optimization theme="outline" size="24" fill="#f15215"/>
        <h1 class="ml-2 text-lg">每日签到 , 再接再厉</h1>
      </div>
      <div v-if="!isSign"  class="flex justify-center itms-center">
        <div class="mt-3 w-10/12  ">
            <el-input v-model="input" size="large"  
            placeholder="请输入今天你想说的话..." prefix-icon="ChatDotRound" >
             
            </el-input>

               <!-- 提示消息 -->
       <div v-if="isShow" class="mt-2 w-1/2 border rounded-md border-red-400 bg-red-300" :class="{'animate-pulse':isShow}">
       
       &nbsp;签到内容 必须介于5-20个字符之前.

  </div>
        </div>
     
      </div>
      <!-- 提交按钮 -->
      <div v-if="!isSign" class="ml-[106px]  mt-5 mb-4 ">
        <el-button type="primary" @click="submit(input)">保存提交</el-button> 
      </div>
     </div>

     <div class="bg-white mt-10 ">
        <h1 class="p-3 text-lg ml-3">今日签到排行</h1>
        <el-table size="large" class="!p-3" 
         :data="TableDate" border  style="width: 100%"  :header-cell-style="{'text-align':'center'}">
         
    <el-table-column   prop=""  label="签到用户" width="180"  >
            <template v-slot="scope">          
              <router-link :to="{}"  class="flex justify-center items-center" >
                <img  :src="scope.row.avatar"  class="flex hover:border hover:duration-700 hover:border-blue-400 rounded-md object-cover
                          shadow-md overflow-hidden box-border mr-5  w-[40px] h-[40px]">
     <p class="hover:underline hover:text-red-400 ">{{scope.row.nickName}}</p>
                          </router-link>  
      
        </template>
      </el-table-column>


    <el-table-column align="center" prop="signTime" label="今日签到时间" width="180" />
    <el-table-column  align="center" prop="signCount" label="总签到天数" width="150" />
    <el-table-column  align="center" prop="signContent" label="签到内容" />
    <el-table-column  fixed="right" width="120">
      <template v-slot="scope">
        <el-button @click="open(userStore().info?.id)"
         v-if="scope.row.id==userStore().info?.id" link type="primary" size="small" width="50" 
          >删除</el-button
        >
        
      </template>
    </el-table-column>
  </el-table>
   </div>
</div>


</template>
<style scoped lang='scss'>
    .el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}


</style>